<template>
  <div class="xxxxx">
    <el-input-number v-model="num" :min="1" controls-position="right" />
    <el-button type="primary" @click="goto">跳转到</el-button>
  </div>
  <virtual-scroll :data="list" :scroll-wrapper-style="style" ref="scrollRef" v-loading="loading">
    <template #item="{ data }">
      <el-card shadow="hover">
        <template #header> 序号：{{ data.index }} </template>
        <p><span>姓名：</span>{{ data.name }}</p>
        <p><span>账号：</span>{{ data.account }}</p>
        <p><span>手机号：</span>{{ data.phone }}</p>
        <p><span>邮箱：</span>{{ data.email }}</p>
        <p><span>性别：</span>{{ data.sex }}</p>
        <p><span>状态：</span>{{ data.sex }}</p>
      </el-card>
    </template>
  </virtual-scroll>
</template>
<script setup lang="ts">
import { ref, onMounted, computed, Teleport } from 'vue';
import { sleep } from '@/utils/index.ts';
import { createUserList } from '@/utils/mock.ts';
import VirtualScroll from '@/components/virtual-scroll/index.vue';

const scrollRef = ref<InstanceType<typeof VirtualScroll> | null>(null);
const list = ref([]);
const num = ref(2000);
const loading = ref(false);

const style = {
  gap: '20px',
  display: 'grid',
  gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))'
};
const goto = () => {
  scrollRef.value?.scrollToIndex(num.value);
};
const queryData = async () => {
  loading.value = true;
  await sleep(1000);
  // console.log();
  list.value = createUserList({ pageSize: 100000, pageNum: 1 });
  console.log(list.value);
  loading.value = false;
};

onMounted(() => {
  queryData();
});
</script>

<style lang="less" scoped>
.xxxxx {
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 1000;
  display: flex;
  gap: 10px;
}
</style>
